<template>
	<div id="backToTop" class="backToTop" @click="backToTop" style="display:none;">
		<i class="el-icon-caret-top"></i>
	</div>
</template>

<script>
export default {
	data() {
		return {
		}
	},
	watch: {
		'$route' (to, from) {
			// 对路由变化作出响应...
			// this.scrollToTop();
		}
	},
	mounted() {
		let _this = this;
		var backToTop = document.getElementById('backToTop');
		window.onscroll = function(){ 
			let scroll = document.documentElement.scrollTop || document.body.scrollTop;  //获取距离页面顶部的距离
			backToTop.style.display = scroll<150 ? 'none' : 'block';
		}
	},
	methods: {
		backToTop(){
			let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
			if (currentScroll > 0) {
				window.requestAnimationFrame(this.backToTop);
				window.scrollTo (0,currentScroll - (currentScroll/5));
			}
		},
		// scrollToTop(){
		// 	let _this = this;
		// 	let backToTop = document.getElementById('backToTop');
		// 	window.onscroll = function(){ 
		// 		let scroll = document.documentElement.scrollTop || document.body.scrollTop;  //获取距离页面顶部的距离
		// 		backToTop.style.display = scroll<150 ? 'none' : 'block';
		// 		backToTop.className = 'backToTop';
		// 	}
		// }
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
	.backToTop{
		background-color: #fff;
		position: fixed;
		right: 100px;
		bottom: 150px;
		width: 40px;
		height: 40px;
		overflow: hidden;
		border-radius: 20px;
		cursor: pointer;
		transition: .3s;
		box-shadow: 0 0 6px rgba(0,0,0,.15);
		z-index: 5;
		i{	
			color:#f86254;
			display: block;
			line-height: 40px;
			text-align: center;
			font-size: 20px;
		}
	}
</style>
